<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Nodejs</title>
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
	<script src="/js/jquery.min.js"></script>
	<style type="text/css">
		td,th{
			text-align: center;
		}
	</style>
</head>
<body>
	<!-- Modal1 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">添加</h4>
				</div>
				<div class="modal-body">
					<!--form表单开始-->
					<form class="form-horizontal" method="post"  name="addForm" id="form">
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">姓名:</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputEmail3" name="name" placeholder="姓名">
							</div>
						</div>
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">性别:</label>
							<div class="col-sm-10">
								<label class="radio-inline">
									<input type="radio"  value="1" name="sex" checked> 男
								</label>
								<label class="radio-inline">
									<input type="radio"  value="0" name="sex"> 女
								</label>
								<label class="radio-inline">
									<input type="radio"  value="2" name="sex"> 保密
								</label>
							</div>
						</div>
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">年龄</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="age" id="inputEmail3" placeholder="年龄">
							</div>
						</div>
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">城市</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputEmail3" name="province" placeholder="城市">
							</div>
						</div>
						
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" id="submitBtn" class="btn btn-default">添加</button>
							</div>
						</div>
						<!--form表单结束-->
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" id="btn" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>
	<!--模态框结束-->
	
	<div class="container">
		<div class="row">
			<div class="col-md-10"><h1>Nodejs</h1></div>
			<div class="col-md-2 text-align">
				<h1><a href="#" class="btn btn-success" id="add" data-toggle="modal" data-target="#myModal">添加</a></h1>
			</div>
		</div>
	</div>
	<div class="container" id="showList">
		<table class="table table-hover table-bordered">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>城市</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<% for(var i=0;i<data.length;i++) { %>
				<tr>
					<td><%= data[i].id %></td>
					<td><%= data[i].name %></td>
					<td><%= data[i].sex %></td>
					<td><%= data[i].age %></td>
					<td><%= data[i].province %></td>
					<td>
						<a href="javascript:viod(0);" data-toggle="modal" data-target="#myModal" class="glyphicon glyphicon-wrench btn btn-success edit"></a>
						<a href="/del/<%= data[i].id %>" class="glyphicon glyphicon-trash btn btn-danger del"></a>
					</td>
				</tr>
				<% } %>
			</tbody>
		</table>
	</div>

	<script type="text/javascript">
		$(function(){
			//显示添加表单
			$('#add').click(function(){
				$('#myModalLabel').html('添加');
				$("#form input[name=id]").remove();
				$('#form').attr({ "action" : "/add" });
				$('#form input[name=name]').val('');
				$('#form input[name=sex]').val('1');
				$('#form input[name=age]').val('');
				$('#form input[name=province]').val('');
			});

			//显示编辑表单
			$('.edit').click(function(){
				$('#myModalLabel').html('修改');
				$('#form').attr({ "action" : "/edit" });
				if (!$('#form').hasClass('.hidden')) {
					$('<input type="hidden" class="hidden" name="id">').prependTo('#form');
				}
				
				var td = $(this).parent('td').siblings();

				$('#form input[name=id]').val(td.eq(0).html());
				$('#form input[name=name]').val(td.eq(1).html());
				$('#form input[name=sex]').val(td.eq(2).html());
				$('#form input[name=age]').val(td.eq(3).html());
				$('#form input[name=province]').val(td.eq(4).html());
				
			});
			
			// $('.del').click(function(){
			// 	var id = $(this).parent('td').siblings().eq(0).html();
			// 	console.log(id);
			// 	$.ajax({
			// 		type : 'get',
			// 		url : './del/'+id,
			// 		success : function(data){
			// 			console.log(data);
			// 		},
			// 		error : function(){
			// 			alert('AJAX执行失败');
			// 		}
			// 	});
			// });
		});
	</script>

	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>
</body>
</html>